<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>X-System-Login</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">

    <style>
        html,body {width: 100%;height: 100%;overflow: hidden}
        body {background: #1e9fff;}
        body:after {content: '';background-repeat: no-repeat;background-size: cover;-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter:blur(3px);-ms-filter: blur(3px);filter: blur(3px);position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width: 360px;height: 300px;position: absolute;left: 50%;top: 40%;margin-left: -180px;margin-top: -100px;}
        .logo-title {text-align: center;letter-spacing: 2px;padding: 14px 0;}
        .logo-title h1 {color: #1e9fff;font-size: 25px;font-weight: bold;}
        .login-form {background-color: #fff;border: 1px solid #fff;border-radius: 3px;padding: 14px 20px;box-shadow: 0 0 8px #eeeeee;}
        .login-form .layui-form-item {position: relative;}
        .login-form .layui-form-item label {position: absolute;left: 1px;top: 1px;width: 38px;line-height: 36px;text-align: center;color: #d2d2d2;}
        .login-form .layui-form.item input {padding-left: 36px;}
        .captcha {width: 60%;display: inline-block;}
        .captcha-img {display: inline-block;width: 34%;float: right;}
        .captcha-img img {height: 34px;border: 1px solid #e6e6e6;height: 36px;width: 100%;}
        #captcha {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>X-System-Login</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="username"></label>
                    <input type="text" name="username" lay-verify="required|account" placeholder="Username or Email" autocomplete="off" class="layui-input" value="admin">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="password"></label>
                    <input type="password" name="password" lay-verify="required|password" placeholder="Password" autocomplete="off" class="layui-input" value="123456">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" name="captcha" lay-verify="required|captcha" placeholder="Captcha" autocomplete="off" class="layui-input verification captcha" value="">
                    <div class="captcha-img">
                        <img th:src="@{/captcha}" id="captcha" width="130px" height="48px" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="Remember Password">
                </div>
                <div class="layui-form-item">
                    <button id="btn-login" class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">Login</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/jq-module/jquery.particleground.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
        var ctxPath = [[@{/}]];

            $("#captcha").click(function () {
                $("#captcha").attr("src",ctxPath + 'captcha?date=' + new Date().getTime());
            });

            layui.use(['form'],function () {
                var form = layui.form,
                    layer = layui.layer;
                
                if (top.location != self.location) top.location = self.location;
                
                $(document).ready(function () {
                    $('.layui-container').particleground({
                        dotColor: '#7ec7fd',
                        lineColor: '#7ec7fd'
                        
                    });
                });
                
                form.on('submit(login)',function (data) {
                    $("#btn-login").attr("disabled","disabled").addClass("layui-btn-disabled");

                    data = data.field;
                    if (data.username == ''){
                        layer.msg('Username Not Null');
                        return false;
                    }
                    if (data.password == ''){
                        layer.msg('Password Not Null');
                        return false;
                    }
                    if (data.captcha == ''){
                        layer.msg('Captcha Not Null');
                        return false;
                    }

                    var url = ctxPath + "user/login"
                    $.post(url,data,function (response) {
                        console.log(response);
                        if (response.code == 0) {
                            layer.msg('Login Successfully',{icon: 6,time:2000},function () {
                                window.location = '/index';
                            });
                        } else {
                            layer.msg(response.message,{icon: 5,anim: 6});
                            $("#btn-login").removeAttr("disabled","disabled").removeClass("layui-btn-disabled");
                        }
                    });

                    return false;

                });
            });




</script>

</body>
</html>